<template>
  <div>
    <!-- 输入栏和按钮 -->
    <div style=" line-height: 40px;margin-bottom: 4px;height: 40px;">
      <el-input style="width: 220px; float: left;margin-left: 5px;" placeholder="请输入名称" v-model.trim="name"
        @keyup.enter.native="loadFiles(); messageAlert()" suffix-icon="el-icon-search" maxlength="20">
      </el-input>
      <!-- 一系列按钮 -->
      <el-button type="primary" style="float: left; margin-left: 5px;" @click="loadFiles(); messageAlert()">搜索
      </el-button>
      <el-button type="warning" style="float: left; margin-left: 10px;" @click="name = ''">重置
      </el-button>

      <el-popconfirm title="确定删除该权限吗？" icon-color="red" @confirm="batchDeleteFiles"
        style="float: right;  margin-left: 15px; margin-top:-2px; ">
        <el-button slot="reference" type="danger">批量删除</el-button>
      </el-popconfirm>
      <el-upload :action="'http://localhost:9090/file/upload'" :show-file-list="false"
        :on-success="handleFileUploadSuccess" style="display: inline-block;float: right;">
        <el-button type="primary" class="ml-5">上传文件 <i class="el-icon-top"></i></el-button>
      </el-upload>

    </div>

    <div style="height: 90%;padding-top: 0px;padding-bottom: 5px;margin-top: 10px;">
      <!-- 表格 -->
      <el-table :data="tableData" border stripe :header-cell-class-name="headerStyle" v-loading="loading"
        @selection-change="handSelectChange">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column prop="id" label="ID" width="200"></el-table-column>
        <el-table-column prop="fileName" label="名称" width=""></el-table-column>
        <el-table-column prop="size" label="大小(K)" width=""></el-table-column>
        <el-table-column label="预览">
          <template slot-scope="scope">
            <el-button type="primary" @click="preview(scope.row.url)">预览</el-button>
          </template>
        </el-table-column>
        <el-table-column label="下载">
          <template slot-scope="scope">
            <el-button type="primary" @click="download(scope.row.url)">下载</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="enable" label="是否使用" width="">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.enable" active-color="#13ce66" inactive-color="#ff4949"
              @change="changeEnable(scope.row)">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="250">

          <!--slot-scope="scope"一个添加条件 叫做插槽;  -->
          <template slot-scope="scope">
            <!-- 删除按钮，弹出框提醒 Popconfirm 气泡确认框，Popover 弹出框不成功-->
            <el-popconfirm title="确定删除该权限吗？" icon-color="red" @confirm="deleteFile(scope.row.id)">
              <el-button slot="reference" type="text">删除</el-button>
            </el-popconfirm>
          </template>

        </el-table-column>
      </el-table>
    </div>

    <div class="block" style="padding: 5px;margin-bottom: -10px;padding-left: 380px;">
      <span class="demonstration"></span>
      <!-- 分页 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
        :page-sizes="[5, 8, 12, 15]" :page-size="8" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>

</template>

<script>
  export default {
    name: 'File',
    data() {
      return {
        tableData: [], //页面数据
        total: 0, //页面大小
        pageNum: 1, //页码
        pageSize: 8, //页大小

        //关键字查询
        name: '',
        //表格加载图片
        loading: true,

        tableRowClassName: 'tableRowClassName',

        props: {
          label: 'name',
        },

        // 弹出框提醒
        visible: false,


      }
    },

    methods: {
      handleSizeChange(val) {
        this.pageSize = val;
        this.loadFiles();
      },
      handleCurrentChange(val) {
        this.pageNum = val;
        this.loadFiles();
      },
      headerStyle({
        row,
        column,
        rowIndex,
        columnIndex
      }) {
        return 'tableStyle'
      },
      //获得后台users数据
      loadFiles() {
        // 获得数据之前加载加载页面
        const that = this;
        that.loading = true;
        this.$axios.get('/file/pageFiles', {
            params: {
              pageNum: that.pageNum,
              pageSize: that.pageSize,
              name: that.name,
            }
          })
          .then(function (response) {
            //获得数据之后取消加载页面 
            that.loading = false;
            that.tableData = response.data.files;
            that.total = response.data.total;
          })
          .catch(function (error) {
            console.log(error);
          })
          .then(function () {
            // always executed
          });
      },
      // 消息提醒方法
      messageAlert() {
        this.$message({
          message: '查询成功！',
          type: 'success',
          duration: 1600
        });
      },
      messageAlert3() {
        this.$message({
          message: '删除成功',
          type: 'success',
          duration: 1600
        });
      },

      //多选处理
      handSelectChange(val) {
        // 把选择的数字赋值data
        this.multipleSelection = val;
      },

      // 批量删除处理
      batchDeleteFiles() {
        let ids = this.multipleSelection.map(v => v.id);
        const that = this;
        that.loading = true;
        // delet只可以传递一个值，不可以传递对象数组
        this.$axios.post('/file/batchDeleteFiles', {
            ids: ids
          })
          .then(function (response) {
            that.loadFiles();
            that.messageAlert3();
          })
          .catch(function (error) {
            console.log(error);
          })
      },

      // 删除用户
      deleteFile(id) {
        // 获得数据之前加载加载页面
        const that = this;
        that.loading = true;
        this.$axios.delete('/file/deleteFile', {
            params: {
              id: id
            }
          })
          .then(function (response) {
            that.loadFiles();
            that.messageAlert3();
          })
          .catch(function (error) {
            console.log(error);
          })
      },

      changeEnable(row) {
        const that = this;
        that.loading = true;
        this.$axios.get('/file/updateEnable', {
            params: {
              id: row.id,
              enable: row.enable
            }
          })
          .then(function (response) {
            that.loadFiles();
            that.$message({
              message: '修改成功',
              type: 'success',
              duration: 1600
            });
          })
          .catch(function (error) {
            console.log(error);
          })
      },
      download(url) {
        window.open(url)
      },
      preview(url) {
        window.open('https://file.keking.cn/onlinePreview?url=' + encodeURIComponent(window.btoa((url))))
      },
      handleFileUploadSuccess(res) {
        this.$message.success("上传成功");
        this.loadFiles();
      },
    },
    created() {
      this.loadFiles();
    }
  }

</script>

<style>
  .tableStyle {
    background-color: rgb(236, 236, 236) !important;
    color: rgb(0, 0, 0);
    font-weight: 500;
    font-size: medium;
  }

</style>
